<template>
    <view class="wgxx-table">
        <view class="title">{{ rawData.TownName }}</view>
        <view class="table-wrapper">
            <table class="village-table">
                <thead class="thead">
                    <tr>
                        <th>村级</th>
                        <th>编号</th>
                        <th>村级责任人</th>
                        <th>转移、安置责任人</th>
                        <th>巡查员</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(row, rowIndex) in rawData.children" :key="row.Id">
                        <!-- 村级（合并相同值） -->
                        <td v-if="shouldRenderCell(rowIndex, 0)" :rowspan="getRowspan(rowIndex, 0)"
                            class="merged-cell dl">
                            {{ row.VillageName }}
                        </td>

                        <!-- 编号 -->
                        <td>{{ row.RiskAreaCode || '暂无' }}</td>

                        <!-- 村级责任人（合并相同值） -->
                        <td v-if="shouldRenderCell(rowIndex, 2)" :rowspan="getRowspan(rowIndex, 2)" class="merged-cell">
                            {{ row.VillageResponsibleName }}
                            <view class="tel" @click="callPhone(row.VillageResponsibleTel)">
                                {{ row.VillageResponsibleTel }}
                            </view>
                        </td>

                        <!-- 转移、安置责任人（合并相同值） -->
                        <td v-if="shouldRenderCell(rowIndex, 3)" :rowspan="getRowspan(rowIndex, 3)" class="merged-cell">
                            {{ row.TransferResponsibleName }}
                            <view class="tel" @click="callPhone(row.TransferResponsibleTel)">
                                {{ row.TransferResponsibleTel }}
                            </view>
                        </td>

                        <!-- 巡查员 -->
                        <td>{{ row.InspectorName }}
                            <view class="tel" @click="callPhone(row.InspectorTel)">
                                {{ row.InspectorTel }}
                            </view>
                        </td>
                    </tr>
                </tbody>
            </table>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { callPhone } from '@/utils/util';

const props = withDefaults(defineProps<{
    rawData: any;
}>(), {
    rawData: () => ({}),
})
const mergeInfo = ref([])
// 计算合并信息
const calculateMergeInfo = () => {
    const data = props.rawData.children
    if (!data.length) return

    // 初始化合并信息：[行][列] = { rowspan: 1, hidden: false }
    mergeInfo.value = Array.from({ length: data.length }, () =>
        Array.from({ length: 5 }, () => ({
            rowspan: 1,
            hidden: false,
        })),
    )

    // 需要合并的列及其对应的字段
    const mergeColumns = [
        { index: 0, key: 'VillageName' }, // 村级
        { index: 2, key: 'VillageResponsibleName' }, // 村级责任人
        { index: 3, key: 'TransferResponsibleName' }, // 转移安置责任人
    ]

    mergeColumns.forEach(({ index, key }) => {
        let currentValue = data[0][key]
        let startRow = 0
        let count = 1

        for (let i = 1; i < data.length; i++) {
            if (data[i][key] === currentValue) {
                count++
                mergeInfo.value[i][index].hidden = true
            } else {
                mergeInfo.value[startRow][index].rowspan = count
                currentValue = data[i][key]
                startRow = i
                count = 1
            }
        }

        // 处理最后一组
        mergeInfo.value[startRow][index].rowspan = count
    })
}
watch(() => props.rawData, calculateMergeInfo)

// 获取单元格合并行数
const getRowspan = (rowIndex, colIndex) => {
    return mergeInfo.value[rowIndex]?.[colIndex]?.rowspan || 1
}
// 判断单元格是否需要渲染
const shouldRenderCell = (rowIndex, colIndex) => {
    return !mergeInfo.value[rowIndex]?.[colIndex]?.hidden
}
</script>

<style lang="scss" scoped>
.wgxx-table {}

.title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    color: #333;
    height: 70rpx;
    position: sticky;
    z-index: 10;
    background-color: #ffffff;
    /* #ifdef APP-PLUS */
    top: 106rpx;
    /* #endif */
    /* #ifndef APP-PLUS */
    top: calc(110rpx + 40px);
    /* #endif */
}

.table-wrapper {
    padding: 10rpx;
    border-radius: 16rpx;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.village-table {
    width: 100%;
    border-collapse: collapse;
}

.village-table th,
.village-table td {
    text-align: left;
    border: 1px solid #e5e5e5;
    padding: 10rpx 0;
    font-size: 24rpx;
    text-align: center;
}

.village-table th {
    background-color: #4285f4;
    color: #fff;
    font-weight: 500;
}

.village-table tr:nth-child(even) td {
    background-color: #f9f9f9;
}

.merged-cell {
    background-color: #f0f7ff;
    font-weight: 500;
}

.dl {
    writing-mode: vertical-lr;
    letter-spacing: 20rpx;
    text-align: center;
}

.tel {
    color: #4285f4;
    font-size: 24rpx;
}

.thead {
    position: sticky;
    z-index: 10;
    /* #ifdef APP-PLUS */
    top: 176rpx;
    /* #endif */
    /* #ifndef APP-PLUS */
    top: calc(108rpx + 40px + 70rpx);
    /* #endif */
}
</style>
